import React, { Component, SyntheticEvent, createRef, Ref } from 'react';
import { Input, Button, Modal, Tag, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import Collections from '@/components/collections';
import Markdown from '@/components/markdown';
import Tags, { colors } from '@/components/tags';
import httpRequest from '@/utils/request';
import './style.less';

export interface EditorProps {}

export interface EditorState {
  title: string;
  content: string;
  htmlContent: string;
  collections?: string[];
  tags?: string[];
  isModalVisible: boolean;
  selectTags: {
    id: string;
    tagname: string;
  }[];
}
class EditorBlock extends Component<EditorProps, EditorState> {
  state!: EditorState;
  Tags = createRef<Tags>();
  Markdown = createRef<Markdown>();
  Collections = createRef<Collections>();

  constructor(props: EditorProps) {
    super(props);
    this.state = {
      title: '',
      content: '',
      htmlContent: '',
      isModalVisible: false,
      selectTags: [],
    };
  }
  componentDidMount() {}

  setTitle = (e: SyntheticEvent) => {
    this.setState({
      title: e.target.value,
    });
  };

  setContent = (params: { content: string; htmlContent: string }) => {
    this.setState({
      ...params,
    });
  };

  submit = async () => {
    try {
      await httpRequest.post('/block', {
        ...Object.assign(this.state, {
          collectionIds: this.Collections.current?.state.value || [],
          tagIds: this.state.selectTags
            ? this.state.selectTags.map(v => v.id)
            : [],
        }),
        editorType: 1,
        authorId: '001',
        author: '阿祥',
      });
      message.success('添加成功');
    } catch (error) {}
  };

  deleteTag = (id: string) => {
    const index = this.state.selectTags.findIndex(v => v.id === id);
    const selectTags = [...this.state.selectTags];
    if (index === -1) return;
    selectTags.splice(index, 1);
    this.setState(() => ({
      selectTags,
    }));
  };

  handleOk = () => {
    this.setState(() => ({
      selectTags: this.Tags.current?.state.selectValue || [],
    }));
    this.setState(() => ({
      isModalVisible: false,
    }));
  };

  handleCancel = () => {};

  render() {
    return (
      <div className="editor">
        <header>
          <p> 标题: </p>
          <Input onChange={this.setTitle}></Input>
          <p> 分类: </p>
          <Collections ref={this.Collections}></Collections>
        </header>
        <aside>
          <p> 标签: </p>
          {this.state.selectTags.map((tag, index) => {
            return (
              <Tag
                color={colors[Number(index) % 11]}
                key={tag.id}
                onClose={() => this.deleteTag(tag.id)}
                closable
                visible={true}
              >
                {tag.tagname}
              </Tag>
            );
          })}
          <Button
            onClick={() =>
              this.setState(state => ({
                isModalVisible: true,
              }))
            }
            type="primary"
            size="small"
            icon={<PlusOutlined />}
          >
            添加标签
          </Button>
        </aside>
        <main>
          <div className="wrap">
            <Markdown
              ref={this.Markdown}
              onChange={this.setContent}
              content=""
            ></Markdown>
          </div>
        </main>
        <footer>
          <Button onClick={this.submit} type="primary">
            提交
          </Button>
        </footer>
        <Modal
          title="选择标签"
          visible={this.state.isModalVisible}
          onOk={this.handleOk}
          onCancel={() =>
            this.setState(state => ({
              isModalVisible: false,
            }))
          }
          destroyOnClose={true}
        >
          <Tags ref={this.Tags} selectValue={this.state.selectTags}></Tags>
        </Modal>
      </div>
    );
  }
}

export default EditorBlock;
